import React, { useState, useImperativeHandle, forwardRef } from 'react'
import { Picker, Image, Popup, Input, Calendar } from 'antd-mobile'
import { DatetimePicker, Field } from 'react-vant'
import "./index.less"

function EditTime (props, ref) {
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState(new Date())
    useImperativeHandle(ref, () => ({
        changeVisivle: () => setVisible(true),
    }))

    const onConfirm = (val) => {
        console.log(val, 'time');
        setVisible(false)
        props.getCanlendarVal(val)
    }


    return (
        <Popup
            visible={visible}
            onMaskClick={() => {
                setVisible(false)
            }}
            bodyStyle={{ height: '40vh' }}
        >

            <DatetimePicker
                type='datetime'
                minDate={new Date(2020, 0, 1)}
                maxDate={new Date(2025, 10, 1)}
                value={value}
                onChange={setValue}
                onConfirm={onConfirm}
                onCancel={() => setVisible(false)}
            />

        </Popup>
    );
}

export default forwardRef(EditTime);
